<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>JS富有创意的卡通滑杆拖动控件DEMO演示</title>
	</head>
	<style>
		html,
		body {
			margin: 0;
			height: 100%;
		}

		body {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #a9cbee;
		}

		input[type="range"] {
			-webkit-appearance: none;
			background: transparent;
			width: 90%;
			max-width: 500px;
			outline: none;
		}

		input[type="range"]:focus,
		input[type="range"]:active,
		input[type="range"]::-moz-focus-inner,
		input[type="range"]::-moz-focus-outer {
			border: 0;
			outline: none;
		}

		input[type="range"]::-moz-range-thumb {
			border: none;
			height: 50px;
			width: 50px;
			background-color: transparent;
			background-image: url("img.png");
			background-position: 0 0;
			background-size: cover;
			transform: scale(1.9) rotateZ(var(--thumb-rotate, 10deg));
			cursor: pointer;
		}

		input[type="range"]::-moz-range-thumb:active {
			background-position: 100% 0px;
			transform: scale(2) rotateZ(var(--thumb-rotate, 10deg));
		}

		input[type="range"]::-moz-range-track {
			width: 100%;
			height: 20px;
			background: #eee;
			border-radius: 10px;
			box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
			cursor: pointer;
		}

		input[type="range"]::-moz-range-progress {
			height: 20px;
			background: #4685d7;
			border-radius: 10px;
			cursor: pointer;
		}

		input[type="range"]::-webkit-slider-thumb {
			border: none;
			height: 50px;
			width: 50px;
			background-color: transparent;
			background-image: url("img.png");
			background-position: 0 0;
			background-size: cover;
			transform: scale(1.9) rotateZ(var(--thumb-rotate, 10deg));
			cursor: pointer;
			margin-top: -15px;
			-webkit-appearance: none;
		}

		input[type="range"]::-webkit-slider-thumb:active {
			background-position: 100% 0px;
			transform: scale(2) rotateZ(var(--thumb-rotate, 10deg));
		}

		input[type="range"]::-webkit-slider-runnable-track {
			width: 100%;
			height: 20px;
			background: #eee;
			border-radius: 10px;
			box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
			cursor: pointer;
			-webkit-appearance: none;
		}

		label {
			background: #eee;
			border-radius: 50%;
			box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
			padding: 14px;
			margin-left: 10px;
			font-family: Roboto, 'Helvetica Neue', Arial;
			font-size: 20px;
			width: 25px;
			text-align: center;
			color: #2968bb;
			font-weight: bold;
			content: '';
		}
	</style>
	<body>
		<input id="slider" name="slider" type="range" value="0">
		<label for="slider">0</label>
		<script>
			const input = document.querySelector("input");
			const label = document.querySelector("label");

			input.addEventListener("input", event => {
				const value = Number(input.value) / 100;
				input.style.setProperty("--thumb-rotate", `${value * 720}deg`);
				label.innerHTML = Math.round(value * 50);
			});
		</script>
	</body>
</html>
